<template>
	<section class="toolbar-container">
		<section class="toolbar-left">
			<el-menu :router="true" 
        :default-active="activeIndex" 
        style="width: auto" 
        mode="horizontal" 
        @select="handleSelect">
				<!-- <el-submenu v-for="item in menuList" :key="item.id" :index="item.id">
          <template #title>
            <span>{{item.name}}</span>
          </template>
        </el-submenu> -->
        <el-menu-item @click="openToLink" index="#">怀旧版v1.0</el-menu-item>
        <el-menu-item v-for="(item,index) in menuList" :key="index" :index="item.path">{{item.name}}</el-menu-item>
			</el-menu>
		</section>
		<section class="toolbar-right"></section>
	</section>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
	name: 'index-toolbar-component',
	setup() {
		const state = reactive({
			activeIndex: 1,
      menuList: [
        {
          id: 2,
          name: '首页',
          path: '/',
        },
        {
          id: 3,
          name: '官Q动态',
          path: '/index-fpa-activity'
        },
        {
          id: 4,
          name: '开发社区',
          path: '/index-devtool'
        },
        {
          id: 5,
          name: '关于我们',
          path: '/index-about-us'
        },
        {
          id: 6,
          name: '协会历史',
          path: '/index-fpa-history'
        }
      ]
		});
		const handleSelect = (key: string, keyPath: string[]) => {
			console.log(key, keyPath);
		};
    const openToLink=()=>{
      window.open('https://www.freeprogramming.cn/')
    }
		return {
			...toRefs(state),
			handleSelect,
      openToLink
		};
	},
});
</script>
<style lang="scss" scoped>
.toolbar-container {
	display: flex;
	height: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
  
	align-items: center;
	.toolbar-left {
		width: 100%;
	}
}
</style>
